<template>
  <div class="news">
    <ul>
      <li v-for="news in newList" :key="news.id">
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`" >{{news.title}}</RouterLink> -->
        <RouterLink 
        :to="{
          path: '/news/detail',
          query:{
            id:news.id,
            content:news.content,
            title:news.title
          }
          }" 
        >
          {{news.title}}
        </RouterLink>
      </li>
    </ul>
    <div class="news-content">
       <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
     import{reactive} from 'vue'
     import{RouterView, RouterLink} from 'vue-router'

     const newList = reactive([
      {id:'1', title:'巴以冲突',content:'以色列攻打巴勒斯坦'},
      {id:'2', title:'柬埔寨挖运河',content:'东方某大国帮助柬埔寨开挖运河'},
      {id:'3', title:'特朗普竞选总统',content:'特朗普有信息继续竞选总统'},
      {id:'4', title:'越南访问中国',content:'越南假把式访问中国'},
     ])


</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker{
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>